<!--详情页-->
<script setup>
import {onMounted, ref} from "vue";
import {get} from "../util/Request.js";
import {Toast} from "tdesign-mobile-vue";
import router from "../router/index.js";

const bookName=ref(localStorage.getItem("bookName"))

const images=ref({})

const user=localStorage.getItem("token")
const users=JSON.parse(localStorage.getItem("user"))

// let typeId=localStorage.getItem("typeId");

const handleClick = () => {
  // localStorage.setItem("id",typeId)
  window.history.back() // 返回上一级页面
};

const aiwo=ref("收藏")

onMounted(()=> {
  get("tbBook/findBook?bookName="+bookName.value).then(r => {
    if (r.code == 0) {
      images.value = r.data
      if (user != undefined && user != null){
        get("tbMe/findMe?bookId="+images.value.bookId).then(r => {
          if (r.code == 0) {
            aiwo.value="已收藏"
          } else {
            aiwo.value="收藏"
          }
        })
      }
    } else {
      Toast(r.data)
    }
  })
})


// JSON.parse(user).id

const cang=()=>{
  if (user != undefined && user != null){
    if (aiwo.value==="收藏"){
      get("tbMe/meAdd?bookId="+images.value.bookId).then(r => {
        if (r.code == 0) {
          aiwo.value="已收藏"
          Toast(r.data)
        } else {
          aiwo.value="收藏"
          Toast(r.data)
        }
      })
    }else {
      get("tbMe/deleteMe?bookId="+images.value.bookId).then(r => {
        if (r.code == 0) {
          aiwo.value="收藏"
          Toast(r.data)
        } else {
          aiwo.value="已收藏"
          Toast(r.data)
        }
      })
    }
  }else {
    Toast("请先登录!")
  }
}

const deleteBook=()=>{
  get("tbBook/deleteBook?bookId="+images.value.bookId).then(r => {
    if (r.code == 0) {
      Toast(r.data)
      window.history.back()
    } else {
      Toast(r.data)
    }
  })
}

</script>

<template>
  <div>
    <t-navbar title="图书简介" :fixed="false" left-arrow @left-click="handleClick" />
  </div>
  <div >
    <h1>{{bookName}}</h1>
    <t-button @click="cang" size="extra-small" theme="primary">{{ aiwo }}</t-button>
    <t-button v-if="users?.statu == 1"  style="margin-left: 5%"  @click="deleteBook" size="extra-small" theme="primary">删除</t-button>
  </div>
  <div style="margin-top: 2%">
    <t-notice-bar style="width: 85%;margin-left: 3%;" class="notice-bar-demo-block" visible :prefix-icon="false" marquee :content="content" />
  </div>
  <div>
    <div class="image-demo" style="padding: 0 8px;margin-top: 3%;width:95%;height:100%;flex-wrap: wrap;display: flex">
      <div style="width: 108px; height: 210px; margin-left: 1.2%;">
        <t-image :src="images.bookImg" class="image-container" style="width: 108px; height: 70%;" />
        <!--        <p class="image-demo-tip">{{ image.bookName }}</p>-->
      </div>
      <div  style="width: 30%;margin: 0 auto" >
        <h3>{{ images.bookName }}</h3>
        <p style="margin-top: -20%">{{ images.bookLei }}</p>
        <p style="width: 200px;margin-left: -50%;margin-top: -20%">{{ images.bookSub1 }}</p>
      </div>
    </div>
  </div>
  <div>
    <p>{{ images.bookSub2 }}</p>
  </div>
</template>

<style scoped>

</style>